<template>
  <div>
    <div>
      <ele-page
        v-loading="loading"
        :formConfig="searchConfig"
        ref="eleTable"
        :operateList="operateList"
        @handleOperateEvent="handleOperateEvent"
        :column="column"
        :getList="getList"
        :initForm="otherParams"
        :beforeAjax="beforeAjax"
        uniqueId="mesMaterialRequisitionDetailTable"
      >
      </ele-page>
    </div>
    <ele-form-drawer
      :isLoading="isLoading"
      v-model="formDataDialog"
      v-bind="formDescDialog"
      :request-fn="handleSubmit"
      :visible.sync="visible"
      :title="title"
      size="80%"
    >
    </ele-form-drawer>
  </div>
</template>

<script>
import { operateList, searchConfig, formDescDialog, rowConfig } from "./config";
import {
  getList,
  rowCreate,
  rowUpdate,
  rowDel,
  getInfo,
  getMasterInfo,
  getOrderTypeList,
} from "@/api/materialRequisition/mesMaterialRequisitionDetail";

export default {
  name: "mesMaterialRequisitionDetail",
  data() {
    return {
      title: null,
      visible: false,
      isLoading: false,
      loading: false,
      formDataDialog: {},
      formDescDialog, //新增修改框
      searchConfig,
      operateList,
      getList,
      otherParams: this.$route.query,
      // 列表页字段的绑定配置
      column: [
        {
          type: "selection",
          fixed: "left",
        },
        {
          type: "index",
          label: $i18n.t("common.order"),
          width: 60,
          fixed: "left",
        },
        // {
        //   prop: "factoryCode",
        //   label: "工厂编码",
        //   width: 100,
        //   fixed: "left",
        // },

        {
          prop: "orderNo",
          label: $i18n.t("mesMaterialRequisitionDetail.orderNo"),
          width: 180,
          showOverflowTooltip: true,
        },
        {
          prop: "orderType",
          label: $i18n.t("mesMaterialRequisitionDetail.orderType"),
          width: 120,
          optionProp: {
            value: "value",
            label: "description",
          },
          option: async (data) => {
            const list = await getOrderTypeList();
            console.log("order:" + list.data.result);
            return list.data.result;
          },
        },
        {
          prop: "prdOrder",
          label: $i18n.t("mesMaterialRequisitionDetail.productOrderCode"),
          width: 180,
          showOverflowTooltip: true,
        },
        {
          prop: "goodsCode",
          label: $i18n.t("mesMaterialRequisitionDetail.materialCode"),
          width: 160,
          showOverflowTooltip: true,
        },
        {
          prop: "goodsName",
          label: $i18n.t("mesMaterialRequisitionDetail.materialName"),
          width: 180,
          showOverflowTooltip: true,
        },
        {
          prop: "unit",
          label: $i18n.t("mesMaterialRequisitionDetail.measureUnit"),
          width: 160,
          showOverflowTooltip: true,
        },
        {
          prop: "unitCode",
          label: $i18n.t("mesMaterialRequisitionDetail.measureUnitCode"),
          width: 160,
          showOverflowTooltip: true,
        },
        {
          prop: "barcode",
          label: $i18n.t("mesMaterialRequisitionDetail.barcode"),
          width: 600,
          showOverflowTooltip: true,
        },
        {
          prop: "boxCode",
          label: $i18n.t("mesMaterialRequisitionDetail.boxCode"),
          width: 600,
          showOverflowTooltip: true,
        },
        // {
        //   prop: 'packageCode',
        //   label: $i18n.t('mesMaterialRequisitionDetail.packageCode'),
        //   width: 600,
        //   showOverflowTooltip: true
        // },
        // {
        //   prop: 'palletCode',
        //   label: $i18n.t('mesMaterialRequisitionDetail.palletCode'),
        //   width: 600,
        //   showOverflowTooltip: true
        // },
        // {
        //   prop: 'amount',
        //   label: '数量'
        // },
        // {
        //   prop: 'waveOrderNo',
        //   label: '波次单号',
        //   width: 120,
        //   showOverflowTooltip: true
        // },
        // {
        //   prop: 'waveOrderLine',
        //   label: '波次行项目',
        //   width: 120
        // },
        // {
        //   prop: 'orderType',
        //   label: '单据类型',
        //   width: 130,
        //   optionProp: {
        //     value: 'value',
        //     label: 'description'
        //   },
        //   option: async (data) => {
        //     const list = await getOrderTypeList()
        //     return list.data.result
        //   }
        // },
        // {
        //   prop: 'customerCode',
        //   label: '客户编码',
        //   width: 140,
        //   showOverflowTooltip: true
        // },
        // {
        //   prop: 'owner',
        //   label: '货主',
        //   width: 120
        // },
        // {
        //   prop: 'version',
        //   label: '版本'
        // },
        // {
        //   prop: "accountingFlag",
        //   label: "过账状态",
        //   width: 120,
        //   optionProp: {
        //     value: "value",
        //     label: "description",
        //   },
        //   option: async (data) => {
        //     const list = await getAccountingFlagList();
        //     return list.data.result;
        //   },
        // },
        // {
        //   prop: "accountingTime",
        //   label: "过账时间",
        //   width: 170,
        // },
        // {
        //   prop: "accountingOrder",
        //   label: "过账凭证号",
        //   width: 140,
        //   showOverflowTooltip: true,
        // },
        // {
        //   prop: "accountingMessage",
        //   label: "过账返回信息",
        //   width: 180,
        //   showOverflowTooltip: true,
        // },
        // {
        //   prop: "remark",
        //   label: "备注",
        //   width: 180,
        //   showOverflowTooltip: true,
        // },
        // {
        //   prop: "warehouseCode",
        //   label: "仓库",
        //   width: 120,
        //   showOverflowTooltip: true,
        //   optionProp: {
        //     value: "modelingCode",
        //     label: "modelingName",
        //   },
        //   option: async (data) => {
        //     const list = await getCurrentWarehouseCode();
        //     return list.data.result;
        //   },
        // },
        // {
        //   prop: "areaCode",
        //   label: "库区编码",
        //   width: 120,
        //   showOverflowTooltip: true,
        //   optionProp: {
        //     value: "areaCode",
        //     label: "areaDesc",
        //   },
        //   option: async (data) => {
        //     const list = await getAreaCodeList();
        //     return list.data.result;
        //   },
        // },
        // {
        //   prop: "locationCode",
        //   label: "库位编码",
        //   width: 120,
        // },
        {
          prop: "createByName",
          label: $i18n.t("common.createByName"),
          width: 130,
        },
        {
          prop: "createTime",
          label: $i18n.t("common.createTime"),
          width: 170,
        },
        {
          prop: "updateByName",
          label: $i18n.t("common.updateByName"),
          width: 130,
        },
        {
          prop: "updateTime",
          label: $i18n.t("common.updateTime"),
          width: 170,
        },
        {
          prop: "operate",
          label: $i18n.t("common.operation"),
          width: 160,
          fixed: "right",
          render: (h, scope) => {
            return (
              <ele-row-operation
                scope={scope}
                rowConfig={rowConfig}
                onRowOperate={this.rowOperate}
              ></ele-row-operation>
            );
          },
        },
      ],
    };
  },
  computed: {},
  methods: {
    beforeAjax(data) {
      return { ...this.otherParams, ...data };
    },

    //表格顶部按钮操作事件
    handleOperateEvent({ handleName, name, rows }) {
      this.title = name;
      const fnc = {
        // add: () => {
        //   getMasterInfo(this.$route.query.requisitionId)
        //     .then((res) => {
        //       // this.formDataDialog = {}
        //       // 默认主子表的关联字段相同，若有问题，自己根据实际情况转换
        //       // this.formDataDialog = res.data.result
        //       this.changeSub(false)
        //       this.formDataDialog = {
        //         requisitionId: res.data.result.id,
        //         id: res.data.result.id
        //       }
        //       this.visible = true
        //     })
        //     .finally(() => {
        //       this.isLoading = false
        //     })
        // },
        // delete: () => {
        //   this.$confirm("此操作将删除该领料单明细表, 是否继续?", "提示", {
        //     confirmButtonText: "确定",
        //     cancelButtonText: "取消",
        //     type: "warning"
        //   }).then(() => {
        //     const ids = rows.map((val) => val.id).join(",")
        //     this.rowDel(ids)
        //   })
        // }
      };
      fnc[handleName] && fnc[handleName]();
    },
    //表格行操作事件
    rowOperate({ handleName, name, row }) {
      this.title = name;
      const fnc = {
        show: () => {
          // 修改详情，并打开界面
          this.editInfo(row.id, true);
        },
        edit: () => {
          // 修改详情，并打开界面
          this.editInfo(row.id, false);
        },
      };
      fnc[handleName] && fnc[handleName]();
    },
    //弹框提交事件
    handleSubmit(data) {
      if (this.isLoading) return; // 判断状态
      this.isLoading = true;
      this.formDataDialog.id ? this.rowUpdate(data) : this.rowCreate(data);
    },
    //新增
    rowCreate(data) {
      rowCreate(data)
        .then((res) => {
          const message = res.data.message;
          this.$message.success(message || $i18n.t("common.addSuccess"));
          this.visible = false;
          this.refresh();
        })
        .finally(() => {
          this.isLoading = false;
        });
    },
    // 修改详情
    editInfo(id, flag) {
      this.changeSub(flag);
      this.loading = true;
      getInfo(id)
        .then((res) => {
          this.formDataDialog = res.data.result;
          this.visible = true;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //修改
    rowUpdate(data) {
      rowUpdate(data)
        .then((res) => {
          const message = res.data.message;
          this.$message.success(message || $i18n.t("common.editSuccess"));
          this.visible = false;
          this.refresh();
        })
        .finally(() => {
          this.isLoading = false;
        });
    },
    //删除
    rowDel(data) {
      this.loading = true;
      rowDel(data)
        .then((res) => {
          const message = res.data.message;
          this.$message.success(message || $i18n.t("common.deleteSuccess"));
          this.refresh();
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //刷新表格数据
    refresh(isReset = true) {
      this.$refs.eleTable.refresh(isReset);
    },
    changeSub(flag) {
      if (flag) {
        formDescDialog.disabled = true;
        formDescDialog.isShowSubmitBtn = false;
      } else {
        formDescDialog.disabled = false;
        formDescDialog.isShowSubmitBtn = true;
      }
    },
  },
};
</script>
